<template>
  <div class="container">
    <el-row>
      <el-col :span="12">
        <el-row>
          <el-button type="primary" icon="el-icon-plus" @click="add"
            >添加数据</el-button
          >
        </el-row>
        <el-row>
          <Table
            :columnProps="columnProps"
            :tableData="infos"
            :showHandle="true"
            @delete="del"
            @modify="modify"
          />
        </el-row>
        <el-row>
          <div class="dialog-footer">
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
        </el-row>
      </el-col>
      <el-col :span="10" :push="2">
        <div class="graph-container" id="graph-container"></div>
      </el-col>
    </el-row>
    <add-modal
      :show="show"
      :id="id"
      :info="curRow"
      :dataList="infos"
      @on-toggle="toggle"
      @getSingleInfo="getSingleInfo"
    ></add-modal>
  </div>
</template>

<script>
import echarts from "echarts";
import Table from "@/components/Table";
import { Message } from "element-ui";
import { add, getDetail, update } from "@/api/productData";
import { imgTypeArr } from "@/utils/enumConfig";
import AddModal from "./component/addModal.vue";

export default {
  components: {
    Table,
    AddModal
  },
  data() {
    const columnProps = [
      {
        title: "日期",
        dataIndex: "date",
        key: "date"
      },
      {
        title: "数值",
        dataIndex: "value",
        key: "value"
      }
    ];
    return {
      loading: false,
      imgType: imgTypeArr.join(","),
      typeList: [],
      myFileList: [],
      id: "",
      show: false,
      infos: [],
      columnProps,
      curRow: {},
      chart: null
    };
  },
  async mounted() {
    let { id } = this.$route.params;
    if (id) {
      this.id = id;
      let infos = await getDetail({ productId: id });
      if (infos) {
        infos.forEach(item => {
          item["key"] = item.id;
        });
        this.infos = infos;
      }
    }
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  methods: {
    toggle(val) {
      this.show = val;
    },
    del(row) {
      let _infos = this.infos;
      _infos = _infos.filter(item => item.key !== row.key);
      this.infos = _infos;
    },
    getSingleInfo(item) {
      let _infos = this.infos;
      let _index = _infos.findIndex(val => item.key === val.key);
      //编辑
      if (_index > -1) {
        _infos[_index] = item;
        this.$set(this.infos, _index, item);
        return;
      } else {
        item.productId = this.id;
      }
      //新增
      this.infos = _infos.concat({ ...item, key: new Date().valueOf() });
    },
    async onSubmit() {
      let res = await update({ dataList: this.infos });
      if (res.code === 1) {
        Message({
          message: "保存成功！",
          type: "success",
          duration: 1 * 1000
        });
        setTimeout(() => {
          this.$router.go(-1);
        }, 1000);
      }
    },
    modify(row) {
      this.curRow = { ...row, isEdit: true };
      this.show = true;
    },
    add(row) {
      this.curRow = {};
      this.show = true;
    },
    initCharts(infos) {
      let _infos = this.$_.cloneDeep(infos).sort((pre, cur) => {
        let a = new Date(pre.date) / 1000;
        let b = new Date(cur.date) / 1000;
        return a - b;
      });
      let dateArr = _infos.map(item => item.date);
      let valArr = _infos.map(item => item.value);
      let option = {
        title: {
          text: "产品数据走势图"
        },
        tooltip: {
          trigger: "axis"
        },
        xAxis: {
          type: "category",
          data: dateArr
        },
        yAxis: {
          type: "value"
        },
        series: [
          {
            name: "数值",
            data: valArr,
            type: "line",
            itemStyle: {
              normal: {
                color: "#1890ff"
              }
            },
            lineStyle: {
              color: "#1890ff"
            }
          }
        ]
      };
      this.chart = echarts.init(document.getElementById("graph-container"));
      this.chart.setOption(option);
    }
  },
  watch: {
    infos(newV) {
      if (newV) {
        this.initCharts(newV);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 20px;
  .radio-form {
    ::v-deep .el-form-item__error {
      left: 5%;
    }
  }
  .graph-container {
    width: 100%;
    height: 400px;
  }
}
</style>
